import React,{useState,useEffect} from 'react'
import log from '../assets/css/login.module.css'
import { useNavigate ,useSearchParams} from 'react-router-dom';
import { DownOutlined } from '@ant-design/icons'
import {message} from 'antd'
import axios from '../axios/index';
export default function Login() {
    let [phone,setPhone] = useState('');
    let [password,setPass] = useState('');
    let [token,setToken] =useState('');
    let [obj,setObj] = useSearchParams();
    let path = obj.get('path')||'/';
    let nav = useNavigate();
    function getImg(url) {
        return new URL(url, import.meta.url).href;
    }

    // 请求登录
    function login(){
        axios.get('/api/link').then(res=>{
            console.log(res);
            
        })
        console.log(phone,password);
        if(phone == ''||password == ''){
            message.info('请输入用户名或密码')
            return;
        }
        axios.post('/api/login',{
            phone:phone,
            password:password
        }).then(res=>{
            console.log(res.data);
            console.log(res.data.phone);
            
            if(res.data.length == 0){
                message.info('用户名或密码输入错误')
                return;
            }else{
                localStorage.setItem('token',res.data[0].token)
                localStorage.setItem('phone',res.data[0].phone)
                nav(path)
            }
            
        })
    }
    return (
        <div className={log.wrap}>
            <div className={log.img}>
                <img src={getImg('../assets/images/logo.png')} alt="" />
            </div>
            <div className={log.login}>
                <div className={log.left}>
                    <p>登录</p>
                    <div className={log.input}>
                        <div className={log.addr}>
                            <span>中国+86</span>
                            <DownOutlined />
                        </div>
                        <input type="text" placeholder='请输入手机号' className={log.leftInput} value={phone}
                        onChange={(e)=>{
                            setPhone(e.target.value)
                        }}/>
                    </div>
                    <div className={log.input}>
                        <input type="password" placeholder='请输入密码' value={password}  onChange={(e)=>{
                            setPass(e.target.value)
                        }}/>
                    </div>
                    <button className={log.btn} onClick={()=>{
                            login()
                            // localStorage.setItem('token','sdhfgjkwsaedhgsh')
                           
                            // nav(path)
                    }}>登录</button>
                    <div className={log.fo}>
                        <p onClick={()=>{
                            nav('/password')
                        }}>忘记密码</p>
                        <p onClick={()=>{
                            nav('/register')
                        }}>免费注册</p>
                    </div>
                </div>
                <img src={getImg('../assets/images/weit.png')} alt="" />
            </div>
            <div className={log.btm}>
            2018-2019 北京乐闻诺科技有限公司 京ICP备19041303号
            </div>
        </div>
    )
}
